<template>
    <div class="h-100p bg-fff bdr-10 detail">
        <div class="detail-container">
            <v-bill-detail-page :bill="currentBillDetail">
                <v-form-title title="询价信息"/>
                <v-plain-table :data="tableData"
                               :operation="false"
                               :pagination="false">

                </v-plain-table>
            </v-bill-detail-page>
        </div>
    </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillDetailPage from '@/components/bill-detail-page'
  import vFormTitle from '@/components/form-title'
  import vPlainTable from '@/components/plain-table'

  @Component({
    components: {
      vBillDetailPage, vFormTitle, vPlainTable
    }
  })
  export default class Transaction extends Vue {
    id = ''
    currentBillDetail = {}
    tableData: TableData = {
      header: [
        {
          key: 'createTime',
          label: '报价时间'
        },
        {
          key: 'quotationNumber',
          label: '报价机构序号',
        },
        {
          key: 'billEveryDeduction',
          label: '每十万扣款(元)'
        },
        {
          key: 'annualInterestRate',
          label: '年化率(%)'
        },
        {
          key: 'discountAmount',
          label: '贴息额(元)'
        },
        {
          key: 'transferAmount',
          label: '转让额(元)'
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }

    async getBillDetail () {
      let res: AjaxResponse = await  this.$axios.get(`g/gateway/inquiry/${this.id}`)
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.tableData.body = res.data.memberBillQuoteDtos
      }
    }

    mounted () {
      this.id = this.$route.params.id
      this.getBillDetail()
    }
  }
</script>

<style lang="less" scoped>
    .detail {
        overflow-y: scroll;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .detail-container {
        width: 1180px;
        margin: 0 auto;
    }

    .line-item {
        > * {
            width: 49.5%;
            display: inline-block;
        }
    }
</style>
